<template>
    <!-- 地图容器 -->
    <div :id="props.mapId" style="height: 100%;width: 100%;"></div>
</template>

<script setup>

import L from 'leaflet';
import { TiledMapLayer } from '@supermap/iclient-leaflet';
import { mapUrl } from '@/utils/gisAddress.js';
import "leaflet/dist/leaflet.css"
// import lineData from '@/utils/data.js' // 模拟数据
// import GPS from '@/utils/change.js' // 解决坐标偏移
const mapLine = ref(null)
// const dataArr = ref([])


const props = defineProps({
    lineData: {
        type: Array,
        required: true
    },
    mapId: {
        type: String,
        required: true
    }
})

onMounted(() => {
    nextTick(() => {
        // 地图初始化
        // lineData.lineData.forEach((i) => {
        //     let item = i[0]
        //     i[0] = i[1]
        //     i[1] = item
        //     i = GPS.gcj_encrypt(
        //         Number(i[0]),
        //         Number(i[1])
        //     )
        //     dataArr.value.push(i)
        // })
        initMap()

        // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
        var map;
        function initMap() {
            // let map = L.map("lineMap", {
            //     center: [24.485666, 118.0865615286], // 中心位置
            //     zoom: 16, // 缩放等级
            //     attributionControl: true, // 版权控件
            //     zoomControl: true //缩放控件
            // });

            map = L.map(props.mapId, {
                crs: L.CRS.EPSG4326,
                center: props.lineData[0],
                maxZoom: 18,
                zoom: 12,
            });
            mapLine.value = map; // data上需要挂载
            new TiledMapLayer(mapUrl).addTo(map)
            let polyline = L.polyline(props.lineData, { // 点的集合
                weight: 6, //线宽
                opacity: 1, //透明度
                color: "blue", //颜色
            }).addTo(map);
        }
        watch(() => props.lineData, (newValue) => {
            map.remove()
            initMap()
        });
    })
})



</script>

<style lang='scss' scoped></style>